<template>
    <div class="leave-leavepend" v-if="datalists!=null && datalists!=''">
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"教师姓名："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher.teacher_name!=null ? datalists.teacher_leave.teacher.teacher_name.zh : ''}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"请假种类："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher_leave_kinds[0].dictionary_name.zh}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"请假开始时间："}}</Col>
            <Col span="19">{{datalists.teacher_leave.start_time}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"请假结束时间："}}</Col>
            <Col span="19">{{datalists.teacher_leave.end_time}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"请假天数："}}</Col>
            <Col span="19">{{datalists.teacher_leave.leave_days!=null? `${datalists.teacher_leave.leave_days}天`:`0天`}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"审核状态："}}</Col>
            <Col span="19">{{datalists.status==0 ? '未审核':(datalists.status==1 ? '通过' : (datalists.status==2 ? '未通过' : '同意并向上级审批'))}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"是否调课："}}</Col>
            <Col span="19">{{datalists.teacher_leave.whether_class==1 ? '是': '否'}}</Col>
        </Row>
        <Row class="leave-leavepend-rows">
            <Col span="5">{{"教师请假原因："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher_leave_reason.zh}}</Col>
        </Row>

        <div class="detail-record">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="leave-leavepend-rows">请假审核记录</p>
            <Table :columns="columns2" :data="lists" height="400"></Table>
        </div>

        <div class="detail-record" v-if="datalists.teacher_leave.whether_class ==1">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="leave-leavepend-rows">调课记录</p>
            <Table :columns="columns1" :data="whetherlist" height="400"></Table>
        </div>
    </div>
    
</template>

<script>
export default {
    props:['datalists'],
    data () {
        return {
            spinShow:false,
            iswhether:false,
            whetherlist:[],
            lists:[],
            columns1: [
                {
                    title: '请假开始时间',
                    render: (h, params) => {                      
                        return h('div', params.row.start_time);
                    }
                },
                {
                    title: '请假结束时间',
                    render: (h, params) => {                      
                        return h('div', params.row.end_time);
                    }
                },
                {
                    title: '调课安排',
                    render: (h, params) => {
                        let ss = `${params.row.date + params.row.week_id.dictionary_name.zh + params.row.class_type.name.zh + params.row.course_id.course_name.zh}`;                         
                        return h('div', ss);
                    }
                },
                {
                    title: '调课教师',
                    render: (h, params) => {
                        return h('div', params.row.to_teacher!=null?params.row.to_teacher.teacher_name.zh:'未调课');  
                    }
                },
            ],
            columns2: [
                {
                    title: '审核人姓名',
                    render: (h, params) => {
                        return h('div', params.row.teacher!=null?params.row.teacher.teacher_name.zh:'');
                    }
                },
                {
                    title: '审核状态',
                    render: (h, params) => {
                        let col='';
                        let name='';  
                        if(params.row.status=='0'){
                            col='#007d7f';
                            name='未审核';
                        }else if(params.row.status=='1'){
                            col='#1aad33';
                            name='通过';
                        }else if(params.row.status=='2'){
                            col='#f00';
                            name='未通过';
                        }else{
                            col='#FFC107';
                            name='同意并向上级审批';
                        }
                        return h('div',{
                            style: {
                                color: col,
                            },
                        }, name);
                    }
                },
                {
                    title: '时间',
                    render: (h, params) => {
                        return h('div', params.row.created_at);
                    }
                },
            ],
        }
    },
    methods: {
        /************************************************************
         * 加载
         ************************************************************/
        load() {    
            this.spinShow = true
            if(this.datalists.teacher_leave.teacher_leave_id!=null){
                this.$http.get(`api/leave/v1/teacher_leave/getone/${this.datalists.teacher_leave.teacher_leave_id}`).then((response) => {
                    this.lists = response.data.examine_status
                    this.spinShow = false
                });
                if(this.datalists.teacher_leave.whether_class ==1){      
                    this.$http.get(`api/leave/v1/teacher_leave/my_course/${this.datalists.teacher_leave.teacher_leave_id}`).then((response) => {
                        this.whetherlist = response.data
                        this.spinShow = false
                    });
                }
            }else{
                this.spinShow = false
            }
        },
    },
    mounted(){  
        this.load();   
    },
}
</script>
<style lang="less">
.leave-leavepend{
    &-rows{
        padding: 8px 0 2px 0;
        font-size: 14px;
    }
    .detail-record{
        padding: 10px 0;
        position: relative;
    }
}
</style>
